<template>
  <view class="back-card-layout">
    <my-header title="反悔卡"></my-header>
    <my-content class="content">
      <view class="tab">
        <view
          @click="changeStatus(item.id)"
          class="tab_item"
          v-for="item in statusArr"
          :key="item.id"
          :class="status == item.id ? 'active' : ''"
        >
          <view class="tab_title">{{ item.title }}</view>
          <!-- <view class="tab_border"></view> -->
        </view>
      </view>
      <scroll-view
        class="scroll"
        refresher-background=""
        :refresher-triggered="refreshStatus"
        @refresherrefresh="refresh"
        :refresher-enabled="true"
        scroll-y="true"
        @scrolltolower="lower"
      >
        <view class="coupon">
          <view
            class="coupon_item"
            v-for="item in couponData"
            :key="item.id"
            :style="{ filter: item.status != 1 || status != 1 ? 'grayscale(1) brightness(0.8)' : '' }"
          >
            <!-- <view class="coupon_left active" v-if="item.status == 1 && status == 1">
              <image
                mode="widthFix"
                src="http://www.qixdian.cn/upload/20231010/6524c6b95491c.png"
                class="left_bg"
              ></image>
              <image class="coupon_bg" src="http://www.qixdian.cn/upload/20230909/64fc4443c17d3.png"></image>
            </view> -->
            <view class="coupon_left">
              <image mode="widthFix" src="https://www.dingxians.cn/upload/user_static/user/ic-back-card.png" class="left_bg"></image>
              <!-- <image class="coupon_bg" src="http://www.qixdian.cn/upload/20230909/64fc63d3b684e.png"></image> -->
              <!-- <view class="coupon_amount">反悔卡</view> -->
            </view>

            <view class="coupon_right">
              <view class="coupon_title">Tiger潮赏反悔卡</view>

              <view class="coupon_bottom">
                <view class="coupon-info">
                  <view class="coupon_remark">可重新抽取指定盲盒一次</view>
                  <view class="created_at">有效期至{{ item.expired_at }}</view>
                </view>
                <view class="use" v-if="item.status == 1 && status == 1" @click="use()">立即使用</view>
              </view>
            </view>

            <image
              v-if="item.status != 1"
              class="coupon-status"
              :src="`https://www.dingxians.cn/upload/user_static/user/bg-${item.status == 2 ? 'used' : item.status == 3 ? 'expired' : ''}.png`"
            ></image>
          </view>
          <!-- status === 1 表示可使用 -->
          <!-- v-if="item.status != 1 || status != 1" -->
        </view>
      </scroll-view>
    </my-content>
  </view>
</template>

<script>
import api from '../../api/index.js'
export default {
  data() {
    return {
      status: 1,
      statusArr: [
        { id: 1, title: '可使用' },
        { id: 2, title: '已使用' },
        { id: 3, title: '已过期' },
      ],
      page: 1,
      last_page: 1,
      couponData: [],
      resultStatus: false,
      refreshStatus: false,
    }
  },
  onLoad(option) {
    this.getData(1)
  },
  onShow() {},
  methods: {
    use() {
      this.header('/pages/box/index', 2)
    },
    lower() {
      if (this.page >= this.last_page) {
        this.show('没有更多数据了')
        return
      }
      this.page++
      this.getData(1)
    },
    refresh() {
      this.refreshStatus = true
      this.page = 1
      this.getData(2)
    },
    getData(type) {
      uni.showLoading({
        title: '数据加载中',
      })
      api.userBackCards
        .index({ page: this.page, status: this.status })
        .then((res) => {
          if (res.code === 200) {
            this.resultStatus = true
            this.refreshStatus = false
            uni.hideLoading()
            this.last_page = res.data.last_page
            if (type == 1) {
              this.couponData = this.couponData.concat(res.data.data)
            } else {
              this.couponData = res.data.data
            }
            console.log(this.couponData)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    changeStatus(id) {
      if (this.status != id) {
        this.status = id
        this.page = 1
        this.getData(2)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.back-card-layout {
  height: 100vh;
  background-color: #141414;
}
.content {
  height: 100%;
  display: flex;
  flex-direction: column;

  .tab {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80rpx;
    .tab_item {
      font-size: 30rpx;
      margin-left: 24rpx;
      width: 132rpx;
      height: 52rpx;
      line-height: 52rpx;
      text-align: center;
      color: #808080;
      .tab_border {
        width: 50rpx;
        height: 8rpx;
      }
      &.active {
        background-image: url('https://www.dingxians.cn/images/box/tab-bg-active.png');
        background-size: 100% 100%;
        .tab_border {
          // background-color: #3ee0d8;
          // color: #fff;
          background-color: #a361f6;
        }
        .tab_title {
          color: #ded000;
          font-weight: bold;
        }
      }
    }
  }

  .scroll {
    flex: 1;
    margin: 0 auto;
    overflow-y: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .coupon {
    display: flex;
    flex-direction: column;
    width: 715rpx;
    margin: 0 auto;
    height: 100%;
    .coupon_item {
      display: flex;
      margin-bottom: 20rpx;
      height: 200rpx;
      border-radius: 10rpx;
      background-image: url('https://www.dingxians.cn/upload/user_static/user/bg-back-card.png');
      background-size: 100% 100%;
      .coupon_left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 200rpx;
        width: 180rpx;
        margin-right: 20rpx;
        border-top-left-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
        border-top-left-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
        position: relative;
        z-index: 2;
        .left_bg {
          width: 167rpx;
          height: 170rpx;
          margin-left: 20rpx;
        }
        .coupon_bg {
          position: absolute;
          top: 0;
          left: 0;
          height: 200rpx;
          width: 180rpx;
          border-top-left-radius: 10rpx;
          border-bottom-left-radius: 10rpx;
          z-index: -1;
        }
        .coupon_amount {
          font-size: 36rpx;
          color: #000;
          font-weight: bold;
        }
        .coupon_min_amount {
          font-size: 24rpx;
        }

        &.active {
          background-color: #a361f6;
        }
      }

      .coupon-status {
          width: 160rpx;
          height: 150rpx;
          background-size: 100% 100%;
          margin-right: 20rpx;
        }

      .coupon_right {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;

       

        .coupon_title {
          width: 270rpx;
          height: 62rpx;
          margin-top: 36rpx;
          line-height: 52rpx;
          color: #141414;
          font-size: 30rpx;
          font-weight: bold;
          padding-left: 24rpx;
          background-size: 100% 100%;
          background-image: url('https://www.dingxians.cn/upload/user_static/user/bg-back-card-title.png');
        }

        .coupon_bottom {
          margin-left: 35rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .created_at {
            color: white;
            font-size: 18rpx;
            opacity: 0.8;
            margin-top: 10rpx;
          }
          .coupon_remark {
            color: white;
            font-weight: bold;
            font-size: 18rpx;
            opacity: 0.8;
            margin-top: 10rpx;
          }
          .use {
            width: 148rpx;
            height: 48rpx;
            font-size: 24rpx;
            text-align: center;
            line-height: 48rpx;
            margin-right: 20rpx;
            color: #fff;
            background-image: url('https://www.dingxians.cn/upload/user_static/user/bg-use-coupon.png');
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>
